<%-- 
    Document   : tambah_pguna
    Created on : Aug 9, 2012, 10:55:24 AM
    Author     : ubuntu
--%>
<%@ include file="/WEB-INF/jsp/include/page_header.jspf" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Tambah Pengguna</title>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#tabs').tabs();
                
            });
            
             function validateForm(f) {
                 
                     res1 = /[a-zA-Z]/
                     res2 = /[0-9]/
                     res3 = /[!@#$%^&*()]/
                     res4 = /[A-Z]/
                     /**
                      *  if((document.getElementById("password").value.length < 8) || (document.getElementById("password").value.length > 10)) {                    
                        alert("Kata Laluan mesti tidak kurang 8 aksara dan tidak lebih 10 aksara");
                        return false;               
                    }
                      */
                     if (document.getElementById("pwd").value == "") {
                        alert("Sila masukkan Kata Laluan");
                        return false;
                    }                                   
                    if(document.getElementById("pwd").value.length < 8) {                    
                        alert("Kata Laluan mesti tidak kurang 8 aksara");
                        return false;               
                    }
                    else if(!res4.test(document.getElementById("pwd").value)){
                        alert("Kata Laluan mesti mengandungi sekurang-kurangnya satu huruf besar");
                        return false;
                    }
                    else if(!res1.test(document.getElementById("pwd").value)) {
                        alert("Kata Laluan mesti mengandungi kombinasi huruf, nombor dan aksara istimewa {!@#$%^&*()}");
                        return false;
                    }                    
                    else if(!res2.test(document.getElementById("pwd").value)){
                        alert("Kata Laluan mesti mengandungi kombinasi huruf, nombor dan aksara istimewa {!@#$%^&*()}")
                        return false;
                    }                  
                    else if(!res3.test(document.getElementById("pwd").value)){
                        alert("Kata Laluan mesti mengandungi kombinasi huruf, nombor dan aksara istimewa {!@#$%^&*()}")
                        return false;
                    }
                    else if(document.getElementById("acc").value.length == '')
                    {
                        alert("No Akaun mesti dimasukkan")
                        return false;
                    }
                    else if(document.getElementById("ic").value.length == '')
                    {
                        alert("No Pengenalan mesti dimasukkan")
                        return false;
                    }
                     else if(document.getElementById("idPengguna").value.length == '')
                    {
                        alert("ID Pengguna mesti dimasukkan")
                        return false;
                    }
                    else if(document.getElementById("imgid").value == '')
                    {
                        alert("Sila pilih imej profil anda");
                        return false;                        
                    }
                    else if(document.getElementById("pin").value == '')
                    {
                        alert("No Pin mesti dimasukkan. Sila dapatkan no pin di kaunter Tabung Haji yang berdekatan.");
                        return false;                        
                    }
                    else
                    {
                        f.action="${pageContext.request.contextPath}/pengguna/addUser?";
                        f.submit();
                    }
            }
            function fun(x){
                var text = "";
                if(x.id == "aeroplane")
                    text = "kapal terbang";
                if(x.id == "bicycle")
                    text = "basikal";
                if(x.id == "burger")
                    text = "makanan";
                if(x.id == "guitars")
                    text = "gitar";
                if(x.id == "shoes")
                    text = "kasut";
                if(x.id == "toy")
                    text = "mainan";
                 if(x.id == "quran")
                    text = "Al - Quran";
                if(x.id == "sejadah")
                    text = "Sejadah";
                if(x.id == "dinar")
                    text = "Dinar";
                if(x.id == "rehal")
                    text = "Rehal";
                if(x.id == "tasbih")
                    text = "Tasbih";
                if(x.id == "kompas")
                    text = "Kompas";
                document.getElementById("imid").innerHTML="<b>Imej pilihan anda ialah "+text+"</b>";
                document.getElementById("imgid").value=x.id;
            }
            
             function resetAll() {
                  document.getElementById("acc").value="";
                  document.getElementById("ic").value="";
                  document.getElementById("alamat3").value="";
                  document.getElementById("idPengguna").value="";
                  document.getElementById("pwd").value="";
             }

        </script>
    </head>
    <body>        


        <s:form beanclass="th.stripes.action.PenggunaActionBean" class="niceform">
            <div id="content">
                <div id="logo">
                    <span>
                        <img src="${pageContext.request.contextPath}/images/img/ribbon.png"/>               
                    </span>
                </div>
                <h3>
                    Pendaftaran Pengguna
                </h3> 
                     <s:messages/>
                    <s:errors/> 
                    <!--<legend></legend>-->                   
                    
                    <br/>
                    <p>
                        <label><font color="red">*</font>No. Akaun TH</label>
                        <s:text name="noAkaun" id="acc" maxlength="15"/>
                    </p> 
                    <p>
                        <label><font color="red">*</font>No. KP Semasa</label>
                        <s:text name="pengguna.noKp" id="ic" maxlength="12"/> &nbsp;(mykad/no. tentera/no. polis) 
                    </p>  
                    <p>
                        <label><font color="red">*</font>ID Pengguna</label>
                        <s:text name="pengguna.idPengguna" maxlength="12" id="idPengguna"/> &nbsp;Contoh : hasnoraini/hasnor04
                    </p>
                    <p>
                        <label><font color="red">*</font>Kata Laluan</label>
                        <s:password name="pengguna.password" maxlength="10" id="pwd"/>&nbsp;Contoh : myT@H@2013
                    </p>                    
                   <p>
                        <label><font color="red">*</font>No. Pin</label>
                        <s:text name="noPin" id="pin"/> 
                    </p>  
                    <p>
                        <label><font color="red">*</font>Sila pilih imej rahsia anda (imej ini akan dipaparkan setiap kali anda log masuk ke mytaha)</label>                    
                    <table>
<!--                    <tr>
                        <td><img src="${pageContext.request.contextPath}/images/securityimage/aeroplane.jpg" id="aeroplane" onclick="fun(this)" height="80" width="80" style="cursor: pointer"/></td>
                        <td><img src="${pageContext.request.contextPath}/images/securityimage/bicycle.jpg" id="bicycle" onclick="fun(this)" height="80" width="80" style="cursor: pointer"/></td>
                         <td><img src="${pageContext.request.contextPath}/images/securityimage/burger.jpg" id="burger" onclick="fun(this)" height="80" width="80" style="cursor: pointer"/></td>
                    </tr> 
                    <tr>
                         <td><img src="${pageContext.request.contextPath}/images/securityimage/guitars.jpg" id="guitars" onclick="fun(this)" height="80" width="80" style="cursor: pointer"/></td>
                         <td><img src="${pageContext.request.contextPath}/images/securityimage/shoes.jpg" id="shoes" onclick="fun(this)" height="80" width="80" style="cursor: pointer"/></td>
                         <td><img src="${pageContext.request.contextPath}/images/securityimage/toy.jpg" id="toy" onclick="fun(this)" height="80" width="80" style="cursor: pointer"/></td>
                    </tr>-->

                    <tr>
                        <td><img src="${pageContext.request.contextPath}/images/securityimage/quran.jpg" id="quran" onclick="fun(this)" height="80" width="80" style="cursor: pointer"/></td>
                        <td><img src="${pageContext.request.contextPath}/images/securityimage/sejadah.jpg" id="sejadah" onclick="fun(this)" height="80" width="80" style="cursor: pointer"/></td>
                         <td><img src="${pageContext.request.contextPath}/images/securityimage/dinar.jpg" id="dinar" onclick="fun(this)" height="80" width="80" style="cursor: pointer"/></td>
                    </tr> 
                    <tr>
                         <td><img src="${pageContext.request.contextPath}/images/securityimage/rehal.jpg" id="rehal" onclick="fun(this)" height="80" width="80" style="cursor: pointer"/></td>
                         <td><img src="${pageContext.request.contextPath}/images/securityimage/tasbih.jpg" id="tasbih" onclick="fun(this)" height="80" width="80" style="cursor: pointer"/></td>
                         <td><img src="${pageContext.request.contextPath}/images/securityimage/kompas.jpg" id="kompas" onclick="fun(this)" height="80" width="80" style="cursor: pointer"/></td>
                    </tr>

                    <tr>
                        <td colspan="3"><span id="imid" /></td>
                        <s:hidden name="pengguna.imgid" id="imgid" />
                    </tr>
                    </table>
                    </p>
                    <p>
                        <label>&nbsp;</label>
                        <font size="2">Ruangan mandatori bertanda <font color="red">*</font> adalah wajib diisi.</font>
                    </p>
                    <p>
                        <label>&nbsp;</label>
                        <s:button name="addUser" value="Simpan" onclick="validateForm(this.form)"/>
                            <s:reset name="reset" value="Semula" onclick="resetAll()"/>
                    </p>
                   
                </div>
            </div>
        </s:form>
    </body>
</html>
